<template>
  <div id="app">
    <div>app.vue使用黑马组件 <Heima></Heima></div>
    <img alt="Vue logo" src="./assets/logo.png">
    <el-button type="abcd">默认按钮</el-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    用户名：<input type="text" v-model="name">
    <div>验证结果：{{validateRes}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data() {
    return {
      foo: 10,
      name: 'heima',
      validateRes: ''
    }
  },
  // 自定义配置，跟Vue的配置没有任何关系，为了让this.$options
  rules: {
    // 数字最少为1
    foo: {
      validate: value => value > 1,
      message: 'foo变量必须大于1'
    },
    name: {
      // 用户名长度必须大于6个字符
      validate: value => value.length > 6,
      message: '用户名长度必须大于6个字符'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
